<template>
    <v-layout style="justify-content: center;align-content: center;">
        <v-sheet color="blue-grey-lighten-5" width="500"
            style="padding: 5%; align-items: center; justify-content: center;margin-top: 3%;">
            <v-form>
                <v-text-field disabled label="登录账号" variant="solo" v-model="account" density="comfortable">
                </v-text-field>
                <v-text-field label="旧密码" variant="solo" v-model="prev_pas" density="comfortable" :rules="[rules.required]"
                    type="password">

                </v-text-field>

                <v-text-field label="新密码" variant="solo" v-model="new_pas" density="comfortable" :rules="[rules.required]"
                    type="password">

                </v-text-field>
                <v-text-field label="确认密码" variant="solo" v-model="confirm_pas" density="comfortable"
                    :rules="[rules.required]" type="password">

                </v-text-field>
                <span style="color: red;font-size: small;display: block;">
                    *密码应为至少六位数字字母或下划线组成！
                </span>
                <div style="width: 100%;align-items: center; justify-content: center;display: flex;margin-top: 5%;">
                    <v-btn color="light-blue-accent-3" @click="resetPassword()" :loading="isLoading">
                        重置
                    </v-btn>
                    <v-dialog v-model="isShow" width="400" persistent>
                        <template v-slot:default>
                            <v-card height="120" title="重置成功!">
                                <template v-slot:prepend>
                                    <v-icon color="green">
                                        mdi-check-circle
                                    </v-icon>
                                </template>
                                <v-card-text style="font-size: x-large;">
                                    {{ time }}秒后自动跳转
                                </v-card-text>
                            </v-card>
                        </template>
                    </v-dialog>
                </div>
            </v-form>
        </v-sheet>
    </v-layout>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores';
import { verifyPassword } from '@/utils/verification';
import { message } from '@/utils/message';
import { ResetPassword } from '@/controllers/baseController';
import { ref } from 'vue';
import router from '@/router';
let prev_pas = ref(''), new_pas = ref(''), confirm_pas = ref('')
let account = useUserStore().account
let isLoading = ref(false)
let isShow = ref(false)
let time = ref(3)
const rules = {
    required: (value: any) => !!value || '此项必填',
}

async function resetPassword() {
    if (prev_pas.value === '' || new_pas.value === '' || confirm_pas.value === '') {
        message('请填写完整表单！')
        return
    }
    if (prev_pas.value === new_pas.value) {
        message('新密码不能和原始密码一致')
        return
    }
    if (!verifyPassword(new_pas.value)) {
        message('新密码格式不正确')
        return
    }
    if (new_pas.value !== confirm_pas.value) {
        message('确认密码和新密码不一致')
        return
    }
    isLoading.value = true
    try {
        await ResetPassword(prev_pas.value, new_pas.value)
        isShow.value = true
        let intervalId = setInterval(() => {
            time.value--
            if (time.value == 0) {
                clearInterval(intervalId)
                useUserStore().logout()
                router.push('/login')
            }
        }, 1000)
    }
    catch (err: any) {
        message(err.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}
</script>